<template>
  <div class="home">
    <div class="w-full h-34 flex justify-between">
      <van-field v-model="keywords" placeholder="请输入歌曲名字" />
      <van-button type="primary" @click="searchSongFn">搜索</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore, mapState } from 'vuex'
import { search_song } from '@/view/home/home_request'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    let search = reactive({ keywords: '' })
    const searchSongFn = () => {
      console.log(search.keywords)
      search_song({ keywords: search.keywords }).then((res) => {
        console.log(res.result.songs)
        console.log(store)
      })
    }
    onMounted(() => {})
    return {
      ...toRefs(search),
      searchSongFn
    }
  }
}
</script>
<style scoped></style>
